import React, { useState } from "react";
import "./App.css";
import List from "./components/List";
import ShopCart from "./components/ShopCart";
import Total from "./components/Total";

export default function App() {
  let [list, setList] = useState([
    {
      id: 2,
      img: "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/164708/20/20875/95398/6086e7daE5d1ea589/2248e82326846870.jpg.webp",
      text: "兰叶源  轻奢莫兰迪真绒布绢假塑料白玫瑰浆果花把束艺卉餐桌花瓶摆件 浅蓝色 两套更优惠",
      price: 266,
      count: 1,
      flag: true,
    },
    {
      id: 17,
      img: "https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/171768/27/7247/168130/608c2d15E3a224958/3df7428a2844e3e3.jpg.webp",
      text: "BOLON暴龙眼镜2021新款猫眼太阳镜杨幂同款男女个性潮墨镜BL5052 F10-灰色",
      price: 670,
      count: 1,
      flag: false,
    },
    {
      id: 23,
      img: "https://img10.360buyimg.com/jdcms/s300x300_jfs/t1/160379/14/19692/51432/607972a4E033dc1a5/062e66b3a0ece4a8.jpg.webp",
      text: "兰叶源  创意现代轻奢潮牌网红暴力熊大摆件家居软装饰品客厅卡通小号摆设 灰色(站)小号",
      price: 106,
      count: 1,
      flag: false,
    },
    {
      id: 4,
      img: "https://img0.baidu.com/it/u=2046438138,1125349947&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
      text: "兰叶源  创意现代轻奢潮牌网红暴力熊大摆件家居软装饰品客厅卡通小号摆设 灰色(站)小号",
      price: 999,
      count: 1,
      flag: false,
    },
    {
      id: 5,
      img: "https://img0.baidu.com/it/u=75230838,1834501316&fm=253&fmt=auto&app=120&f=JPEG?w=189&h=180",
      text: "兰叶源  创意现代轻奢潮牌网红暴力熊大摆件家居软装饰品客厅卡通小号摆设 灰色(站)小号",
      price: 1314,
      count: 1,
      flag: false,
    },
  ]);

  // 修改单个商品的选中状态
  const change = (index)=>{
    let newList = JSON.parse(JSON.stringify(list))
    newList[index].flag = !newList[index].flag;
    setList(newList)
  }
  const changeCount = (index,p)=>{
    let newList = JSON.parse(JSON.stringify(list))
    // console.log(index,p);
    newList[index].count=Math.max(newList[index].count+p,1)
    setList(newList)
  }

  const select = (flag)=>{ // 全选
    console.log(flag);
    let newList = JSON.parse(JSON.stringify(list))
    newList.forEach(item=>item.flag = flag)
    setList(newList)
  }
  const result = ()=>{
    
  }
  return (
    <div>
      {/* <ShopCart></ShopCart> */}
      <List list={list} change={change} changeCount={changeCount}></List>
      <Total list={list} select={select}></Total>
    </div>
  );
}
